<!--
 * @Author: 收货人信息组件
 * @Date: 2020-06-29 09:47:06
 * @LastEditTime: 2020-07-06 17:55:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \JKShopping\jkshopping\src\pages\payment\order\components\mes.vue
--> 
<template>
  <div class="mes">
    <div class="mes_box clearFix">
      <div class="title">
        <div class="left">
          <van-icon class="icon" name="user-o" size="18" color="#ccc" />
          <span class="user_mes">收货人信息</span>
        </div>
        <div class="right" @click="modifyAddress">
          <van-icon class="icon" name="edit" size="18" color="#ccc" />
          <span class="alter">选择地址</span>
        </div>
      </div>
      <div class="user">
        <span class="user_name">{{name}}</span>
        <span class="phone">{{phone}}</span>
        <div class="address">
          <p
            class="add"
          >{{country_name}}{{province_name}}{{city_name}}{{area_name}}{{consignee_address}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      phone: "",
      country_name: "",
      province_name: "",
      city_name: "",
      area_name: "",
      consignee_address: ""
    };
  },
  methods: {
    modifyAddress() {
      this.$router.push("/address");
    }
  },
  created() {
    this.$eventBus.$on("address", res => {
      console.log(res);
      this.name = res.name;
      this.phone = res.phone;
      this.country_name = res.country_name;
      this.province_name = res.province_name;
      this.city_name = res.city_name;
      this.area_name = res.area_name;
      this.consignee_address = res.consignee_address;
    });
  }
};
</script>

<style lang="scss" scoped>
.mes {
  .mes_box {
    margin-top: 10px;
    width: 100%;
    height: 150px;
    background-color: #fff;
    .title {
      border-bottom: #ccc 1px solid;
      height: 50px;
      padding: 10px;
      box-sizing: border-box;
      .left {
        float: left;
        display: flex;
        justify-content: center;
        // .icon {
        // }
        .user_mes {
          font-size: 18px;
          margin-left: 5px;
        }
      }

      .right {
        float: right;
        display: flex;
        justify-content: center;
        // .icon {
        // }
        .alter {
          // font-size: 1px;
          margin-left: 5px;
        }
      }
    }
    .user {
      padding: 20px 20px 20px 20px;
      box-sizing: border-box;
      .user_name {
        font-size: 16px;
        margin-right: 10px;
      }
      .phone {
        font-size: 16px;
      }
      .address {
        margin-top: 10px;
        .add {
          font-size: 18px;
          color: #ccc;
        }
      }
    }
  }
}
</style>